<template>
<!-- 运输任务里的任务查看详情END -->
    <div class="elmaindemo">
      <div class="boxMainA">
        <el-descriptions title="" class="boxMainA01">
            <el-descriptions-item label="订单编号：">18166394717994578</el-descriptions-item>
            <el-descriptions-item label="运单编号:">3390765863255655</el-descriptions-item>
            <el-descriptions-item label="下单时间：">2021-06-21 18:16:10</el-descriptions-item>
            <el-descriptions-item label="订单状态：">已签收</el-descriptions-item>
            <el-descriptions-item label="已签收预计到达日期：">2021-06-21 18:16:10</el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="boxmainB">
        <el-collapse v-model="activeNames" >
          <div class="earA">
          <el-collapse-item title="基本信息" name="1">

            <img src="../../../../assets/fahuo.png" alt=""  class="imgA"  width="35px"  height="35px" />
              
                <el-descriptions title="发货方" class="boxMainA02">
                <el-descriptions-item label="发货方姓名：">陌陌</el-descriptions-item>
                <el-descriptions-item label="发货方电话：">3390765863255655</el-descriptions-item>
                <el-descriptions-item label="发货方地址：">北京市直辖区昌平区</el-descriptions-item>
                <el-descriptions-item label="详细地址：">育新地铁站</el-descriptions-item>
                </el-descriptions>
              
            <img src="../../../../assets/shouhuo.png" alt=""  class="imgB"  width="35px"  height="35px" />
             
                <el-descriptions title="发货方" class="boxMainA03">
                <el-descriptions-item label="发货方姓名：">陌陌</el-descriptions-item>
                <el-descriptions-item label="发货方电话：">3390765863255655</el-descriptions-item>
                <el-descriptions-item label="发货方地址：">北京市直辖区昌平区</el-descriptions-item>
                <el-descriptions-item label="详细地址：">育新地铁站</el-descriptions-item>
                </el-descriptions>

              
          </el-collapse-item>
          </div>
          <el-collapse-item title="费用信息 " name="2">
            <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
             <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
              <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
               <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
                <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
                 <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
                  <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
                   <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
                    <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
                     <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
                      <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
                       <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>

                        <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
                         <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
          <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
           <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
            <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>

          </el-collapse-item>
          <el-collapse-item title="货品信息" name="3">
            <div>简化流程：设计简洁直观的操作流程；</div>
            <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
            <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
          </el-collapse-item>
          <el-collapse-item title="取件信息" name="4">
            <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
            <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
          </el-collapse-item>
          <el-collapse-item title="派送信息" name="5">
            <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
            <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
          </el-collapse-item>
          <el-collapse-item title="运输信息" name="6">
            <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
            <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
          </el-collapse-item>
          <el-collapse-item title="订单轨迹" name="7">
            <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
            <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        activeNames: ['1']
      };
    },
    methods: {
      handleChange(val) {
        console.log(val);
      }
    }
  }
</script>

<style scoped>
.earA{position: relative;left: 20px;}
.imgB{position: relative;left: -790px;top: 40px;}
.imgA{position: relative;left: -790px;}
.boxMainA03{width: 1000px;height: 120px; background-color: rgb(252, 252, 252); position: relative; left: 60px; top: 10px;}
.boxMainA02{width: 1000px;height: 50px; background-color: rgb(254, 253, 253); position: relative; left: 60px; top: -30px;}
.boxMainA01{width: 1535px;height: 50px; background-color: rgb(197, 63, 63); position: relative; left: 25px; top: 40px;}
.boxmainB{width: 1635px;height: 250px; background-color: rgb(255, 254, 254); position: relative; left: 25px; top: 40px;}
.boxMainA{width: 1635px;height: 150px; background-color: white; position: relative; left: 25px; top: 20px;}
.elmaindemo {
  position: relative;
  top: -40px;
  /* right: 10px;*/
  width: 100%;
  height: auto;
  border: 10%;
  background-color: #f3f4f7;
}
</style>